<!--
 * @FilePath: /vue3-demo/src/components/HelloWorld-suspense.vue
 * @Author: Yongchao Wang
 * @Date: 2020-09-21 17:31:42
 * @LastEditors: Yongchao Wang
 * @LastEditTime: 2020-09-21 17:37:56
-->
<template>
  <button @click="loadAsyncComponent">点击加载异步组件</button>
  <Suspense v-if="loadAsync">
    <template #default>
      <AsyncComponent></AsyncComponent>
    </template>
    <template #fallback>
      <div class="loading">loading</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from "vue";
export default {
  name: "App",
  data() {
    return {
      loadAsync: false,
    };
  },
  components: {
    AsyncComponent: defineAsyncComponent(() => {
      return import("./AsyncComponent.vue");
    }),
  },
  methods: {
    loadAsyncComponent() {
      this.loadAsync = true;
    },
  },
};
</script>

